<template>
    <p :class="{'active':isActive, 'text-danger':hasError }">Class 样式绑定1</p>
    <p :class="classObject">Class 样式绑定2</p>
    <p :class="[arrActive,arrDanger]">Class 样式绑定3</p>
    <p :class="[isActive?'active':'',hasError?'text-danger':'']">Class 样式绑定4</p>
    <!-- 数组和对象嵌套，只能是数组嵌套对象 -->
    <p :class="[isActive?'active':'',{'text-danger':hasError}]">Class 样式绑定5</p>


</template>

<script>

export default{
    data () {
        return {
            isActive:true,
            hasError:true,
            classObject:{
                'active':true,
                'text-danger':true
            },
            arrActive:"active",
            arrDanger:"text-danger",
        }
    }
} 

</script>
<style>
.active{

    font-size: 30px;
}
.text-danger{
    color: red;
}

</style>